<template>
<el-form ref="ruleFormRef" :rules="rules" :model="formTeacher" label-width="80px">
  <el-row>
    <el-col :span="12">
      <el-form-item label="教师id" prop="teacherNo">
        <el-input v-model="formTeacher.teacherNo" placeholder="请输入教师id"/>
      </el-form-item>
    </el-col>

    <el-col :span="12">
      <el-form-item label="教师姓名" prop="teacherName">
        <el-input v-model="formTeacher.teacherName" placeholder="请输入教师姓名"/>
      </el-form-item>
    </el-col>

  
  </el-row> 
</el-form>

  <div class="dialog-button-wrap">
    <el-button @click="close">取消</el-button>
    <el-button @click="addTeacher(ruleFormRef)" type="success" :loading="subLoading" color="#083a6d">保存</el-button>
  </div>

</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import {ElMessage,FormInstance,FormRules} from 'element-plus'
import {addTeacherApi} from "@/api/edu/teacher/teacher"
// 表单实例对象
const ruleFormRef = ref<FormInstance>()
// 表单约束规则对象
const rules = reactive<FormRules>({
  teacherNo: [{ required: true,message: '教师号不能为空',trigger: 'blur' }],
  teacherName: [{ required: true,message: '教师名称不能为空',trigger: 'blur' }]
})
// 定义事件
const emit = defineEmits(['closeAddTeacherForm','success'])
// 按钮状态
const subLoading = ref(false)
// 表单数据对象
const formTeacher = reactive({
  teacherNo: 1,
  teacherName: '',
})

// 新增教师信息
const addTeacher = async (formEl: FormInstance | undefined)=> {
  if(!formEl)return
  await formEl.validate(async (valid,fields)=> {
    subLoading.value = true
    if(valid){
      const { data } = await addTeacherApi(formTeacher)
      if (data.status === 200){
        ElMessage.success(data.message)
        emit('success')
      }else {
        ElMessage.error(data.message)
      }
    }else {
      ElMessage.error('提交失败，你还有未填写的项')
    }
  })

  subLoading.value = false
}
// 关闭表单
const close = ()=> {
  emit('closeAddTeacherForm')
}
</script>

<style scoped>
.dialog-button-wrap {
  text-align: center;
  margin-top: 20px;
}
</style>
